<template>
  <div class="contract">
    <div class="imgdom" ref="imgdom">
      <div class="title">融资居间服务合同</div>
      <div class="paragraph" style="padding-left: 6px;">
        1今甲方受到乙方进行融资居间服务，成功下款后收取融资金额15%+299元的居间服务费(299只有第一次下款收取)，所有费用都是下款到账后收取，不到账是不会收取任何费用的，另外额度是可以循环使用的，以后续借不收取服务费。
      </div>
      <div class="paragraph" style="padding-left: 6px;">
        2甲方承诺有能力还款，并且按时还款，不会恶意逾期。
      </div>
      <div class="paragraph" style="padding-left: 6px;">3本协议一式两份，签署后生效</div>
      <div class="signs">
        <div class="sign-item">
          <div class="left">甲方：</div>
          <div class="right"></div>
        </div>
        <img
          src="../../assets/images/sign.png"
          alt=""
          class="seal"
          style="left: 90px"
        />

        <div class="sign-item" style="top: -90px; position: relative">
          <div class="left">乙方：</div>
          <div class="right">武汉凯和鑫网络科技有限公司</div>
        </div>
      </div>
      <img
        src="../../assets/images/seal.png"
        alt=""
        class="seal"
        style="top: -160px"
      />
    </div>
    <div class="sign-btns" style="top: -120px; position: relative">
      <weui-button
        :mini="true"
        style="width: 100px; margin: 0 10px"
        @click="sign"
        :block="true"
        >手写签名</weui-button
      >
      <weui-button :mini="true" style="width: 140px" @click="confirm"
        >确认签署</weui-button
      >
    </div>
    <van-action-sheet
        v-model="show"
        :actions="actions"
        cancel-text="取消"
        close-on-click-action
        @cancel="onCancel"
        @select="onSelect"
      />
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import Vue from 'vue'
import { ActionSheet } from 'vant'
Vue.use(ActionSheet)
export default {
  name: 'Contract',
  components: {},
  data () {
    return {
      imgUrl: '',
      show: false,
      timeOutEvent: 0, // 定时器
      actions: [{ name: '保存为图片' }]
    }
  },
  computed: {},
  created () {},
  methods: {
    sign () {
      this.$router.push('/sign')
    },
    confirm () {
      this.$router.push('/read')
    },
    canvas2Image (canvas, width, height) {
      const retCanvas = document.createElement('canvas')
      const retCtx = retCanvas.getContext('2d')
      retCanvas.width = width
      retCanvas.height = height
      retCtx.drawImage(canvas, 0, 0, width, height, 0, 0, width, height)
      // const img = document.createElement('img')
      // img.src = retCanvas.toDataURL('image/jpeg') // 可以根据需要更改格式
      // return img
      retCanvas.toBlob(blob => {
        // 获取当前时间并转成字符串，用来当做文件名
        const date = Date.now().toString()
        // 创建一个 a 标签
        const a = document.createElement('a')
        // 设置 a 标签的下载文件名
        a.download = `${date}.png`
        // 设置 a 标签的跳转路径为 文件流地址
        a.href = URL.createObjectURL(blob)
        // 手动触发 a 标签的点击事件
        a.click()
        // 移除 a 标签
        a.remove()
      })
    },
    saveImg () {
      console.log('长按事件触发')
      // 想要保存的图片节点
      const dom = document.querySelector('.imgdom')

      // 创建一个新的canvas
      const Canvas = document.createElement('canvas')
      const width = document.body.offsetWidth // 可见屏幕的宽
      const height = document.body.offsetHeight // 可见屏幕的高

      Canvas.width = width
      Canvas.height = height
      // Canvas.getContext('2d').scale(scale, scale)
      html2canvas(dom, {
        canvas: Canvas,
        scale: 1,
        useCORS: true,
        logging: true,
        width: width + 'px',
        hegiht: height + 'px'
      }).then(
        (canvas) => {
          const context = canvas.getContext('2d')
          // 关闭抗锯齿形
          context.mozImageSmoothingEnabled = false
          context.webkitImageSmoothingEnabled = false
          context.msImageSmoothingEnabled = false
          context.imageSmoothingEnabled = false
          // canvas转化为图片, 下载到本地
          this.canvas2Image(canvas, canvas.width, canvas.height)
        }

      )
    },
    onCancel () {
      this.show = false
    },
    onSelect (e) {
      if (e) {
        this.saveImg()
      }
    }
  },
  mounted () {
    var startTime
    const imgdom = this.$refs.imgdom
    imgdom.addEventListener('touchstart', (e) => {
      e.preventDefault()
      startTime = new Date().getTime()
    })
    imgdom.addEventListener('touchend', (e) => {
      var endTime = new Date().getTime()
      var diffTime = endTime - startTime

      if (diffTime >= 500) {
        e.preventDefault()
        this.show = true
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.contract {
  padding: 20px;
  .title {
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    margin: 20px 0;
  }
  .signs {
    margin: 20px 0;
    .sign-item {
      display: flex;
      margin: 10px 0;
      .right {
        width: 260px;
        text-align: center;
        border-bottom: 1px solid #222;
      }
    }
  }
  .seal {
    width: 100px;
    height: 100px;
    position: relative;
    top: -60px;
    left: 200px;
  }

  .sign-btns {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
